<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>视频播放器</title>
    <script src="js/player.js"></script>
    <style>
        .videoPlayer {
            width: 600px;
        }

        #myvideo {
            margin-top: 0px;
        }

        #videoControls {
            width: 600px;
            margin-top: 0px;
        }

        #videoProgress {
            width: 600px;
        }
    </style>
</head>

<body>
<div class="videoPlayer" id="videoContainer">
    <video id="myvideo" width="600" height="360" poster="img/beforePlayImg.jpg">
        <source src="video/videoplayback.mp4" type="video/mp4">
        video</source>
        当前浏览器不支持 video直接播放，点击这里下载视频： <a href="video/videoplayback.mp4">下载视频</a>
    </video>
    <div id="videoControls">
        <progress id="videoProgress" max="100" value="0"></progress>
    </div>
    <div>
        <button id="btn_play">播放</button>
        <button id="btn_forward">快放</button>
        <button id="btn_back">慢放</button>
        <button id="btn_up">增大音量</button>
        <button id="btn_down">降低音量</button>
        <button id="btn_silent">静音</button>
        <button id="btn_fullScreen">全屏</button>
    </div>
    <div>
        当前播放速度:<span id="rate"></span><br/>
        当前音量:<span id="volum"></span><br/>
        当前播放时间: <span id="current"></span><br/>
        总时间: <span id="duration"></span>
    </div>

</div>
</body>
</html>